<template>
  <div class="detail-nav-bar">
    <nav-bar>
      <template v-slot:left>
        <div class="back" @click="backClick">
          <img alt="" src="~assets/img/common/back.svg">
        </div>
      </template>

      <template v-slot:center>
        <div class="title">
          <div v-for="(title, idx) in titles" :class="{active: currentIdx === idx}" class="title-item"
               @click="currentIdx = idx">
            {{ title }}
          </div>
        </div>
      </template>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar'

export default {
  name: 'DetailNavBar',
  components: { NavBar },
  data () {
    return {
      titles: ['商品', '参数', '评论', '推荐'],
      currentIdx: 0
    }
  },
  methods: {
    backClick () {
      this.$router.back();
    }
  }
}
</script>

<style scoped>
.title {
  display: flex;
  font-size: 13px;
}

.title-item {
  flex: 1;
}

.back img {
  margin-top: 10px;
}

.title .active {
  color: var(--color-high-text);
}

.detail-nav-bar {
  position: relative;
}
</style>
